<template>
  <div class="app-container">

    <div class="head-container">
      <div style="height: 100%;width: 40%;float: left">
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <h3>配置选择器</h3>
          <el-form-item label="车辆系列" prop="pass">
            <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="构建日期" prop="checkPass">
            <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="发动机类型" prop="age">
            <el-input v-model.number="ruleForm.age"></el-input>
          </el-form-item>
          <el-form-item label="变速器" prop="pass">
            <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="驱动" prop="checkPass">
            <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="外部漆" prop="age">
            <el-input v-model.number="ruleForm.age"></el-input>
          </el-form-item>
          <el-form-item label="内饰织物" prop="pass">
            <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="排放要求" prop="pass">
            <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="内饰diamagnetic" prop="pass">
            <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="传动系统" prop="pass">
            <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="内饰系列" prop="pass">
            <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="内饰环境" prop="pass">
            <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
      </div>

      <div style="width: 55%;float: right">
        <div style="width: 30%;">
          <h3>车辆和配置摘要</h3>
            <el-image src="http://t14.baidu.com/it/u=3047410229,4044637632&fm=224&app=112&f=JPEG?w=500&h=500"></el-image>
        </div>
        <div style="width: 70%">
            <h3>次要功能</h3>
            <el-table
              ref="multipleTable"
              :data="tableData"
              height="250"
              tooltip-effect="dark"
              style="width: 100%"
              @selection-change="handleSelectionChange"
            >
              <el-table-column
                prop="name"
                label="次要功能系列"
                style="width: 45%"
              />
              <el-table-column
                label="次要功能"
                style="width: 45%"
              >
                <template slot-scope="scope">{{ scope.row.date }}</template>
              </el-table-column>
            </el-table>
        </div>
        <div style="width: 70%;margin-top: 10px">
          <el-button style="display:block;margin:0 auto">零件</el-button>
        </div>
<!--        <el-table-column>-->
<!--          <h3>车辆和配置摘要</h3>-->
<!--          <el-row>-->
<!--              <el-image src="http://t14.baidu.com/it/u=3047410229,4044637632&fm=224&app=112&f=JPEG?w=500&h=500"></el-image>-->
<!--          </el-row>-->
<!--          <el-row>-->
<!--            <h3>次要功能</h3>-->
<!--            <el-table-->
<!--              ref="multipleTable"-->
<!--              :data="tableData"-->
<!--              height="250"-->
<!--              tooltip-effect="dark"-->
<!--              style="width: 100%"-->
<!--              @selection-change="handleSelectionChange"-->
<!--            >-->
<!--              <el-table-column-->
<!--                prop="name"-->
<!--                label="次要功能系列"-->
<!--                style="width: 45%"-->
<!--              />-->
<!--              <el-table-column-->
<!--                label="次要功能"-->
<!--                style="width: 45%"-->
<!--              >-->
<!--                <template slot-scope="scope">{{ scope.row.date }}</template>-->
<!--              </el-table-column>-->
<!--            </el-table>-->
<!--          </el-row>-->
<!--          <el-row>-->
<!--            <el-button size="small"></el-button>-->
<!--          </el-row>-->
<!--        </el-table-column>-->
      </div>
    </div>
  </div>
</template>

<script>
import { parseTime } from '@/utils/index'
import { getRoleList, getRole, saveRole, deleteRole, savePermission } from '@/api/role'
export default {
  name: 'indexInfo',
  data() {
    return {
      tableData: [{
        date: '2016-05-03',
        name: '王小虎'
      }, {
        date: '2016-05-02',
        name: '王小虎'
      }, {
        date: '2016-05-04',
        name: '王小虎'
      }, {
        date: '2016-05-01',
        name: '王小虎'
      }, {
        date: '2016-05-08',
        name: '王小虎'
      }, {
        date: '2016-05-06',
        name: '王小虎'
      }, {
        date: '2016-05-07',
        name: '王小虎'
      }],
      ruleForm: [],
      supplierList: [],
      showDialog: false,
      previewShow: false,
      showdocDialogMy: false,
      showdocDialog: false,
      showdocDialogMy2: false,
      wordText: '',
      wordURL: 'https://view.xdocin.com/demo/view.docx',
      fileUrl: 'https://view.xdocin.com/demo/view.docx',
      loading: false,
      cardType: true,
      formLoading: true,
      form: {
        carVin: '',
        region: '',
        name: ''
      },
      roles: [],
      roleName: '',
      createTime: null,
      rules: {
        roleCode: [
          { required: true, message: '请输入角色编码', trigger: 'blur' }
        ],
        roleName: [
          { required: true, message: '请输入角色名称', trigger: 'blur' }
        ]
      },
      showPermissionDialog: false,
      permission: {},
      menuTree: [],
      valueConsistsOf: 'ALL_WITH_INDETERMINATE',
      sortValueBy: 'INDEX'
    }
  },
  methods: {
    parseTime,


    doQuery() {
      var param = { roleName: this.roleName }
      if (this.createTime != null) {
        param.createTimeStart = Date.parse(this.createTime[0])
        param.createTimeEnd = Date.parse(this.createTime[1])
      }
      getRoleList(param).then(res => {
        if (res) {
          this.roles = res
        }
      })
    },
    searchBrand(flag) {
      let param
      if (flag === 1) {
        param = { roleName: '管理' }
        alert('选中捷豹')
      } else {
        alert('选中路虎')
        param = { roleName: '普通' }
      }
      getRoleList(param).then(res => {
        if (res) {
          this.roles = res
        }
      })
    },
    // 预览
    preWatchdoc(row) {
      // 如果是使用开源免费的就将下面注释的打开，并将上面base64一同打开，接入kkFileView开源预览框架整合docker运行kkFileView服务调用
      // var previewServerUrl = 'http://47.99.38.199:8012/onlinePreview?url='
      // var fileUrl = this.fileUrl
      // // // 分别获取预览服务地址和预览参数的地址然后拼接
      // // // 预览文件url地址需要使用Base64编码URL
      // const url =
      //     previewServerUrl + encodeURIComponent(Base64.encodeURI(fileUrl))
      // window.open(url)

      this.showdocDialog = true
    },
    doAdd() {
      this.showDialog = true
      this.formLoading = false
      this.form = {}
    },
    doEdit(id) {
      this.showDialog = true
      getRole(id).then(res => {
        if (res) {
          this.form = res
          this.formLoading = false
        }
      })
    },
    doCancel() {
      this.showDialog = false
      this.formLoading = true
      this.form = {}
    },
    doSubmit(role) {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.formLoading = true
          saveRole(role).then(res => {
            if (res) {
              this.showDialog = false
              this.$notify({
                title: '保存成功',
                type: 'success',
                duration: 2500
              })
              this.doQuery()
            }
          }).catch(() => {
            this.formLoading = false
          })
        }
      })
    },
    doDelete(id) {
      this.$confirm(`确认删除此条数据?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() =>
        deleteRole([id]).then(res => {
          if (res) {
            this.$notify({
              title: '删除成功',
              type: 'success',
              duration: 2500
            })
            this.doQuery()
          }
        })
      ).catch(() => {
      })
    },
    doBeforeClose() {
      this.showDialog = true
    },
    doPemissionCancel() {
      this.showPermissionDialog = false
      this.permission = {}
    },
    doSubmitPemission(permission) {
      console.log(permission)
      savePermission(permission.roleId, permission.menus).then(res => {
        if (res) {
          this.showPermissionDialog = false
          this.$notify({
            title: '配置权限成功',
            type: 'success',
            duration: 2500
          })
        }
      })
    },
    ArrayToTreeData(data) {
      const cloneData = JSON.parse(JSON.stringify(data)) // 对源数据深度克隆
      return cloneData.filter(father => {
        const branchArr = cloneData.filter(child => father.id === child.pid) // 返回每一项的子级数组
        branchArr.length > 0 ? father.children = branchArr : '' // 如果存在子级，则给父级添加一个children属性，并赋值
        const parentArr = cloneData.filter(parent => parent.id === father.pid) // 判断该菜单的父级菜单是否存在
        if (parentArr.length === 0) { return father } // 如果该菜单的父级菜单不存在，则直接返回该菜单
        return father.pid === null // 返回第一层
      })
    },
    toggle() {
      this.cardType = true
    },
    toggletable() {
      this.cardType = false
    }

  }
}

</script>

<style rel="stylesheet/scss" lang="scss">
  .word-wrap {
    padding: 15px;
    img {
      width: 100%;
    }
  }
.role-span {
  font-weight: bold;
  color: #303133;
  font-size: 15px;
}
.role-info {
  margin-top: 0;
  padding-top: 0;
  padding-left: 0;
  list-style: none;
  li {
    border-bottom: 1px solid #f0f3f4;
    padding: 11px 0;
    font-size: 12px;
  }
  .role-left {
    color: rgb(148, 137, 137);
    overflow: hidden;
    white-space: nowrap;
    text-align: left;
    text-overflow: ellipsis;
  }

  .line {
    width: 100%;
    height: 1px;
    border-top: 1px solid #ccc;
  }
}

.card-toggle-table {
  padding: 4px 0;
  display: -webkit-flex;
  display: flex;
  float: right;
  align-items: center;
  margin-left: auto;
}

.card-bg {
  transform-style: preserve-3d;
  width: 150%;
  height: 100%;
  display: block;
  position: relative;
  left: -25%;
  top: -25%;
  transition: 1s cubic-bezier(0.23, 1, 0.32, 1);
  //   pointer-events: none; //pointer-events 更像是JavaScript。用于阻止鼠标事件
}
</style>

<style rel="stylesheet/scss" lang="scss" scoped>
::v-deep .el-input-number .el-input__inner {
  text-align: left;
}
::v-deep .vue-treeselect__multi-value {
  margin-bottom: 0;
}
::v-deep .vue-treeselect__multi-value-item {
  border: 0;
  padding: 0;
}
</style>
